<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主页面</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="main-container">
        <div class="sidebar">
            <div class="logo">
                <h2>港口管理系统</h2>
            </div>
            <nav>
                <ul>
                    <li>
                        <a href="#dashboard" class="active">
                            <span class="icon">📊</span>
                            <span class="title">仪表板</span>
                        </a>
                    </li>
                    <li>
                        <a href="#containers">
                            <span class="icon">📦</span>
                            <span class="title">集装箱管理</span>
                        </a>
                    </li>
                    <li>
                        <a href="#ships">
                            <span class="icon">🚢</span>
                            <span class="title">船舶管理</span>
                        </a>
                    </li>
                    <li>
                        <a href="#cargo">
                            <span class="icon">📝</span>
                            <span class="title">货物管理</span>
                        </a>
                    </li>
                    <li>
                        <a href="#reports">
                            <span class="icon">📈</span>
                            <span class="title">报表统计</span>
                        </a>
                    </li>
                    <li>
                        <a href="admin.html">
                            <span class="icon">👥</span>
                            <span class="title">管理员</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" id="logoutLink">
                            <span class="icon">🚪</span>
                            <span class="title">登出</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
        <div class="main-content">
            <div class="search-box">
                <input type="text" id="searchContainer" placeholder="箱号...">
                <select id="statusFilter">
                    <option value="">全部状态</option>
                    <option value="进口">进口</option>
                    <option value="出口">出口</option>
                </select>
                <button id="searchButton">查询</button>
            </div>
            <div class="data-table">
                <table>
                    <thead>
                        <tr>
                            <th>序号</th>
                            <th>码头名称</th>
                            <th>提单号</th>
                            <th>箱号</th>
                            <th>箱属尺寸</th>
                            <th>箱型</th>
                            <th>铅封号</th>
                            <th>整箱重</th>
                            <th>空重</th>
                            <th>码头放行</th>
                            <th>当前状态</th>
                        </tr>
                    </thead>
                    <tbody id="containerTableBody">
                        <!-- 数据将通过JavaScript动态加载 -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <script src="js/main.js"></script>
</body>
</html>